<template>
    <!-- 港区自然资源禀赋特征查询 -->
    <div class="box" @click="closePort">
        <div class="top-bar">
            <div class="title">港区自然资源禀赋特征查询：</div>
            <div class="search-box flex-al-center">
                <div class="input border-r margin-r" @click.stop="openPort">
                    <input type="text" disabled v-model="port" placeholder="请输入目标港区名称或下拉选择">
                    <div class="result" v-if="showPort">
                        <div class="r-li pointer" v-for="(item, index) in portList" :key="index" @click="getPort(item)">
                            {{ item }}
                        </div>
                    </div>
                    <img class="pointer" src="@/assets/arrow-down.png" :class="{ transform: showPort }" alt="">
                </div>
                <!-- <div class="btn pointer">搜索</div> -->

                <div class="input border-r pointer margin-r" @click.stop="openType">
                    <input type="text" v-model="chartType" placeholder="请选择类型" disabled>
                    <img class="pointer" src="@/assets/arrow-down.png" :class="{ transform: showType }" alt="">
                    <div class="result" v-if="showType">
                        <div class="r-li pointer" v-for="(item, index) in typeList" :key="index" @click="getKey(item)">
                            {{ item }}
                        </div>
                    </div>
                </div>
                <div class="input border-r pointer" @click.stop="openYear">
                    <input type="text" v-model="chartYear" placeholder="请选择年份" disabled>
                    <img class="pointer" src="@/assets/arrow-down.png" :class="{ transform: showYear }" alt="">
                    <div class="result" v-if="showYear">
                        <div class="r-li pointer" v-for="(item, index) in yearList" :key="index" @click="getYear(item)">
                            {{ item }}
                        </div>
                        <div class="r-lis" v-if="yearList.length == 0" style="text-align: center;">空</div>
                    </div>
                </div>
                <div class="btn pointer border-r" style="margin-left:37px" @click="search">查询</div>
                <div class="btn pointer border-r" @click="reset">重置</div>
            </div>
        </div>

        <div class="content">
            <div class="title">{{ title }}</div>
            <div class="chart" ref="chart"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            selected: 1,
            showTab: true,
            port: "宁波舟山港",
            showType: false,
            showYear: false,
            yearList:[],
            chartYear:"",
            chartType: "",
            showPort: false,
            portList: ["阳逻港", "青岛港", "天津港", "宁波舟山港"],
            typeList: ["风能", "太阳能",],
            title: "",
            opts: {
                color: ['#29E5EB', '#C7294C',],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['辐射强度', '温度'],
                    right: "130px",
                    textStyle: {//图例文字的样式
                        color: '#fff',
                        fontSize: 16
                    },
                    selectedMode: false,
                    icon: "circle",
                },

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"],
                        axisLine: {
                            show: true,  //这里的show用于设置是否显示y轴那一条线 默认为true
                            lineStyle: { //lineStyle里面写y轴那一条线的样式
                                color: '#b5afaf',
                                width: 1,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: "辐射强度 kWh/㎡",
                        splitLine: {
                            show: false //去掉折线图中的横线
                        },
                        axisLine: {
                            show: true,  //这里的show用于设置是否显示y轴那一条线 默认为true
                            lineStyle: { //lineStyle里面写y轴那一条线的样式
                                color: '#b5afaf',
                                width: 1,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
                            }
                        },
                        axisLabel: {
                            formatter: function (v) {
                                return v.toFixed(0); //0表示小数为0位，1表示1位小数，2表示2位小数
                            }
                        }

                    },
                    {
                        type: 'value',
                        name: "温度 °C",
                        splitLine: {
                            show: false //去掉折线图中的横线
                        },
                        axisLine: {
                            show: true,  //这里的show用于设置是否显示y轴那一条线 默认为true
                            lineStyle: { //lineStyle里面写y轴那一条线的样式
                                color: '#b5afaf',
                                width: 1,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
                            }
                        },
                        axisLabel: {
                            formatter: function (v) {
                                return v.toFixed(0); //0表示小数为0位，1表示1位小数，2表示2位小数
                            }
                        }

                    }

                ],
                series: [
                    {
                        name: '辐射强度',
                        type: 'line',
                        smooth: true,
                        yAxisIndex: 0,
                        areaStyle: {
                            opacity: 0.8,
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0, color: '#29CDDA' // 0% 处的颜色
                                }, {
                                    offset: 0.74, color: '#29ceda46' // 100% 处的颜色
                                }]
                                ),  //背景渐变色 
                            },
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: null
                    },
                    {
                        name: '温度',
                        type: 'line',
                        smooth: true,
                        yAxisIndex: 1,
                        areaStyle: {
                            opacity: 0.8,
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0, color: '#C7294C' // 0% 处的颜色
                                }, {
                                    offset: 0.74, color: '#c7294b47' // 100% 处的颜色
                                }]
                                ),  //背景渐变色 
                            },

                        },
                        data: null
                    },
                ]
            },
            opts1: {
                color: ['#C7294C'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ["风速"],
                    right: "130px",
                    textStyle: {//图例文字的样式
                        color: '#fff',
                        fontSize: 16
                    },
                    selectedMode: false,
                    icon: "circle",
                },

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"],
                        axisLine: {
                            show: true,  //这里的show用于设置是否显示y轴那一条线 默认为true
                            lineStyle: { //lineStyle里面写y轴那一条线的样式
                                color: '#b5afaf',
                                width: 1,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: "风速 m/s",
                        splitLine: {
                            show: false //去掉折线图中的横线
                        },
                        axisLine: {
                            show: true,  //这里的show用于设置是否显示y轴那一条线 默认为true
                            lineStyle: { //lineStyle里面写y轴那一条线的样式
                                color: '#b5afaf',
                                width: 1,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
                            }
                        },
                        axisLabel: {
                            formatter: function (v) {
                                return v.toFixed(0); //0表示小数为0位，1表示1位小数，2表示2位小数
                            }
                        }

                    }

                ],
                series: [
                    {
                        name: '风速',
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            opacity: 0.8,
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0, color: '#C7294C' // 0% 处的颜色
                                }, {
                                    offset: 0.74, color: '#c7294b47' // 100% 处的颜色
                                }]
                                ),  //背景渐变色 
                            },

                        },
                        data: null
                    },
                ]
            },
            chart: null,
            data1: [],
            data2: [],
            data3: []
        }
    },
    mounted() {
    },
    created(){
        this.getOptionalYears()
    },
    methods: {
        getOptionalYears(){
            this.$api.getOptionalYears().then(res=>{
                if (res.code === 200) {
                    this.yearList = res.data
                }
            })
        },
        reset(){
            this.chartType = ""
            this.chartYear = ""
        },
        // 下拉框选址
        getKey(item) {
            this.chartType = item
        },
        getYear(item) {
            this.chartYear = item
        },
        search() {
            this.chart && this.chart.clear();
            if (this.chartType == "太阳能") {
                let data = {
                    resourceType: "sun",
                    portName: this.port,
                    year:this.chartYear.includes("近") ? "average" : this.chartYear
                }
                this.$api.getEnergyList(data).then(res => {
                    if (res.code === 200) {
                        this.title = res.title
                        this.data1 = res.data.map(val => val.radiation)
                        this.data2 = res.data.map(val => val.temperature)
                        this.getEchartData(this.data1, this.data2)
                    }
                })

            } else {
                let data = {
                    resourceType: "wind",
                    portName: this.port,
                    year:this.chartYear.includes("近") ? "average" : this.chartYear
                }
                this.$api.getEnergyList(data).then(res => {
                    if (res.code === 200) {
                        this.title = res.title

                        this.getEchartData1(res.data.map(val => val.windSpeed))
                    }
                })

            }
        },
        // 太阳能
        getEchartData(data1, data2) {
            let maxData1 = this.calMax(data1);
            let maxData2 = this.calMax(data2);
            let minData1 = this.calMin(data1);
            let minData2 = this.calMin(data2);
            this.opts.yAxis[0].min = minData1
            this.opts.yAxis[0].max = maxData1
            this.opts.yAxis[1].min = minData2
            this.opts.yAxis[1].max = maxData2
            const chart = this.$refs.chart
            if (chart) {
                this.chart = this.$echarts.init(chart)
                this.opts.series[0].data = data1
                this.opts.series[1].data = data2
                const option = this.opts
                this.chart.setOption(option)
                window.addEventListener("resize", () => {
                    this.chart.resize()
                })
            }
            this.$on('hook:destroyed', () => {
                window.removeEventListener("resize", () => {
                    this.chart.resize();
                });
            })
        },
        // 风能
        getEchartData1(data3) {
            let maxData3 = this.calMax(data3);
            let minData3 = this.calMin(data3);
            this.opts1.yAxis[0].min = minData3
            this.opts1.yAxis[0].max = maxData3
            const chart = this.$refs.chart
            if (chart) {
                this.chart = this.$echarts.init(chart)
                this.opts1.series[0].data = data3
                this.opts1.series[1] = null
                const option = this.opts1
                this.chart.setOption(option)
                window.addEventListener("resize", () => {
                    this.chart.resize()
                })
            }
            this.$on('hook:destroyed', () => {
                window.removeEventListener("resize", () => {
                    this.chart.resize();
                });
            })
        },

        calMax(arr) {
            var max = Math.max.apply(null, arr); // 获取最大值方法
            var maxint = Math.ceil(max / 5); // 向上以5的倍数取整
            var maxval = maxint * 5 + 5; // 最终设置的最大值
            return maxval; // 输出最大值
        },
        calMin(arr) {
            var min = Math.min.apply(null, arr); // 获取最小值方法
            var minint = Math.floor(min / 1); // 向下以1的倍数取整
            var minval = minint * 1 - 5; // 最终设置的最小值
            return minval; // 输出最小值
        },

        getPort(item) {
            this.port = item
        },

        // 隐藏列表
        closePort() {
            this.showPort = false;
            this.showType = false;
        },

        openPort() {
            this.showPort = !this.showPort;
        },
        openType() {
            this.showType = !this.showType;
        },
        openYear() {
            this.showYear = !this.showYear;
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    background-color: #000C38;
    height: 90.7vh;
    box-sizing: border-box;
    overflow: auto;
    padding: 27px;
}
.margin-r{
    margin-right: 37px;
}
.top-bar {
    padding: 27px;
    background: #172C69;
    border-radius: 5px;
    margin-bottom: 27px;

    .title {
        font-size: 27px;
        font-weight: 500;
        color: #FFFFFF;
        margin: 0 0 21px 0;
    }

    .search-box {
        .input {
            position: relative;
            border-radius: 5px;
            border: 3px solid #2D57D2;
            padding: 11px 11px 11px 16px;
            border-radius: 5px 0px 0px 5px;

            .result {
                padding: 11px;
                position: absolute;
                z-index: 10000;
                left: -3px;
                right: -3px;
                top: 56px;
                background: #2D57D2;
                box-shadow: 0px 3px 8px 0px rgba(0, 12, 56, 0.75);
                border-radius: 5px 5px 5px 5px;

                .r-li {
                    padding: 3px 11px;
                    margin: 0 0 8px 0;
                    font-size: 21px;
                    border-radius: 5px;

                    &:last-of-type {
                        margin: 0;
                    }

                    &:hover {
                        background: #173CA8;
                    }
                }
                .r-lis{
                    padding: 3px 11px;
                    font-size: 21px;
                    border-radius: 5px;
                }
            }

            input {
                font-size: 21px;
                color: #FFFFFF;
                background-color: transparent;
            }

            img {}
        }

        .btn {
            margin-right: 37px;
            padding: 9.5px 37px 9px;
            background: #2D57D2;
            border-top: 3px solid #2D57D2;
            border-bottom: 3px solid #2D57D2;
            border-radius: 0px 5px 5px 0px;
            font-size: 24px;
            line-height: 28px;
            color: #E9EBF1;
        }

        .border-r {
            border-radius: 5px;

        }
    }

}

.content {
    padding: 27px;
    background: #172C69;
    border-radius: 5px;

    .title {
        width: 99vw;
        margin: 0 auto;
        text-align: center;
        font-size: 22px;
    }

    .chart {
        width: 100%;
        height: 58vh;
    }
}</style>
  